<template>
  <Back title="角色管理">
    <!-- 头部按钮配置 -->
    <template #buttons>
      <el-button type="primary" size="small" plain>删除</el-button>
      <el-button type="primary" size="small">新增管理员</el-button>
    </template>
    <template #head>
      <div class="secone-first">
        <input type="text" placeholder="请输入密码" v-model="input">
        <el-button type="primary" size="small" style="margin-left: 10px;" @click="search">搜索</el-button>
      </div>
    </template>
    <template #table_body>
      <div class="second-second">

        <el-table :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }"
          ref="multipleTable" :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="角色名称 " width="120">
            <template slot-scope="scope">{{ scope.row.role }}</template>
          </el-table-column>
          <el-table-column prop="count" label="
                  管理员人数" width="120">
          </el-table-column>

          <el-table-column prop="role" label="
                  角色描述" show-overflow-tooltip>
            有最高权限的角色，不可删除
          </el-table-column>
          <el-table-column prop="time" label="是否启用" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch v-model="scope.row.boolean" active-color="#rgba(0, 110, 255, 0.898)                "
                inactive-color="#rgba(0, 110, 255, 0.898)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="添加时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="address" label="操作 " show-overflow-tooltip>
            <img src="https://cdn3.axureshop.com/demo/1634752/images/%E5%8C%BB%E7%94%9F%E7%AE%A1%E7%90%86/u6659.svg"
              @click="change" alt="">
            <img class="img"
              src="https://cdn3.axureshop.com/demo/1634752/images/%E5%8C%BB%E7%94%9F%E7%AE%A1%E7%90%86/u6660.svg"
              @click="search" alt="">
          </el-table-column>
        </el-table>

      </div>
    </template>
    <template #page>
      <div class="second-third">
        <div class="block">
          <el-pagination class="page" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size=pageSize
            layout="total,  prev, pager, next,sizes, jumper" :total="tableData.length">
          </el-pagination>
          <el-row class="confirm">
            <el-button size="mini" class="con" style="color: #409EFF;  height: 28px;">确认</el-button>
          </el-row>
        </div>
      </div>
    </template>

  </Back>
</template>
<script>
import { getManegerList } from '@/api/syssetting/index.js'
import Back from '@/components/Part/BackColor.vue'
export default {
  data() {
    return {
      pageSize: 10,
      value: false,
      input: '',
      checked: false,
      tableData: [],
      multipleSelection: [],
      currentPage: 1,

    }
  },
  mounted() {
    getManegerList().then(res => {

      this.tableData = res.data
    })
  },
  methods: {
    search() {
      getManegerList().then(res => {
        this.tableData = res.data
      })
    },
    change() {
      this.$router.push({ path: 'roleset' })
    },
    handleSizeChange(val) {
      // this.pageSize=+`${val}`  
      this.currentPage = 1;
      this.pageSize = val;

    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  components: {
    Back,
  }
}
</script>
<style scoped>
.bule {
  vertical-align: 3px;
  display: inline-block;
  width: 20px;
  height: 10px;
  border-radius: 999px;
  background: #006EFF;
  margin-right: 8px;
}

.deleteButton {
  /* display: inline-block; */
  float: right;
}

.content {
  width: 1280px;
  min-height: 438px;
}

.first {
  height: 40px;
  margin-top: 15px;
}

.maneger {
  font-size: 20px;
}

.second {
  padding-top: 1px;
  width: 100%;
  height: 100%;
  margin-top: 10px;
  /* border: 1px solid black; */
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  padding-left: 20px;
}

.secone-first {
  margin-top: 20px;
}

input {
  width: 300px;
  height: 35px;
  border-radius: 5px;
  color: rgb(153, 153, 153);
  border: 0.5px solid rgb(220, 232, 247);
}

.second-second {
  margin-top: 30px;
  font-weight: lighter;
  /* position: relative; */
}

th {
  margin-left: 30px;
}

.block {
  margin-top: 20px;
}

.confirm {
  position: relative;
  z-index: 10;
}

.con {
  position: absolute;
  top: -49px;
  left: 840px;
}

.page {
  padding-bottom: 20px;
  margin-left: 173px;

}

.img {
  margin-left: 20px;
}

el-table-column {
  text-align: center;
}
</style>